<!-- 物料/产品编码设置 -->
<template>
  <Drawer>
    <div
      ><div class="titleBox"
        ><h4>单位类型</h4
        ><a-button style="margin-top: 10px" type="text" @click="addUnitTypeMod"
          ><template #icon> <icon-plus /> </template>添加单位</a-button
        ></div
      >

      <div>
        <a-list :bordered="false">
          <!-- <template #header> List title </template> -->
          <a-list-item
            :class="index === rowIndex ? 'New-item' : 'item'"
            v-for="(element, rowIndex) in getUnitData"
            :key="element.id"
            @click="getUnitTable(element, rowIndex)"
            ><a-space style="justify-content: space-between; display: flex"
              ><div>{{ element.name }}</div>
              <a-tooltip style="margin-left: 60px" content="删除">
                <a-popconfirm
                  content="确认删除？"
                  type="error"
                  @ok="del(element.id)"
                >
                  <IconFont
                    type="icon-delete"
                    :size="26"
                    :style="{
                      marginLeft: '70px',
                      cursor: 'pointer',
                    }"
                  />
                </a-popconfirm> </a-tooltip></a-space
          ></a-list-item>
        </a-list>
        <addUnitType
          v-model:visible="modelVisible"
          @addUnitForm="addUnitForm"
        />
        <!-- <a-tree
        :data="treeData"
        :default-expanded-keys="['0-0-0']"
        :default-selected-keys="['0-0-0', '0-0-1']"
      /> -->
      </div>
    </div></Drawer
  >
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import {
    GetUnitList,
    PostUnit,
    DelMultiUnit,
  } from '@/api/inventory-management/material-management/index';
  import miiter from '@/utils/mitt';
  import addUnitType from './components/add-unit-type.vue';

  const modelVisible = ref(false);
  const getUnitData = ref();
  const index = ref(0);
  const groupId = ref(null);

  const getUnitList = async () => {
    const res = await GetUnitList({ page: 1, size: -1, type: 1 });
    getUnitData.value = res.content;
    if (groupId.value) {
      index.value = getUnitData.value.findIndex(
        (ele: any) => ele.id === groupId.value
      );
      // miiter.emit('UnitTable', {
      //   data: getUnitData.value.filter(item=>item.id === groupId),
      //   groupId: getUnitData.value[index.value].id,
      // });
    }
    if (index.value) {
      miiter.emit('UnitTable', {
        data: getUnitData.value[index.value].item,
        groupId: getUnitData.value[index.value].id,
      });
    } else {
      miiter.emit('UnitTable', {
        data: res.content[0].item,
        groupId: res.content[0].id,
      });
    }
  };
  getUnitList();

  const getUnitTable = (val: any, rowIndex: any) => {
    index.value = rowIndex;
    miiter.emit('UnitTable', {
      data: val.item,
      groupId: val.id,
    });
  };

  const addUnitTypeMod = () => {
    modelVisible.value = true;
  };

  const addUnitForm = async (data: any) => {
    const { name } = data;
    await PostUnit({ name, type: 1 });
    getUnitList();
  };

  miiter.on('Refresh', (val) => {
    if (val) {
      getUnitList();
    }
  });

  const del = async (id) => {
    try {
      await DelMultiUnit({ id });
      index.value = 0;
      getUnitList();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  miiter.on('emitUnit', (val: any) => {
    groupId.value = val.groupId;
    getUnitList();
  });
</script>

<style scoped lang="less">
  .titleBox {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e0e8e4;
  }

  ::v-deep .drawer-body {
    width: 18.6354rem;
  }

  .New-item {
    background-color: rgb(248, 248, 249);
    color: rgb(61, 126, 255);
  }
  .item {
    background-color: rgb(255, 255, 255);
  }
</style>
